{% extends "canvas.html" %}
{% block content %}
{% load socialregistration_tags %}{% load facebook_tags %}{% facebook_js %}
{% if request.user.is_anonymous %}
           <div style="text-align: center">
           <h1>Find out which sweets you are!</h1>
            <form class="connect-button" method="post" action="{% if logged_in %}{% url facebook_connect %}{% else %}{% url facebook_login %}{% endif %}">
            {% social_csrf_token %}
            <input type="hidden" name="next" value="http://sweetrs.org/srs/canvas/" />
            <input type="image" onclick="facebookConnect(this.form);return false;" src="{{ MEDIA_URL }}gfx/sweets.jpg" />
            </form></div>
            click on sweets to continue.

            <h2>What is sweetrs?</h2>
    <div style="text-alig: left;">It's a small scientific project which is subject of my master's thesis.
        So have fun and contribute to science! More info <a href="http://sweetrs.org/" target="_blank">here</a>.</div>
        {% else %}
<h2>Which sweet are you?</h2>
    Please give a mark on the 1-5 scale where:
    <ul>
        <li>1 means very poor, "I don't like it",</li>
        <li>5 means excelent, "I'm lovin' it".</li>
    </ul>
    If you haven't tried given product just mark it so.
    <h3>Progress <span id="rated">{{ rated }}</span> / <span id="all">{{ all }}</span> already rated</h3>
    <div class="clearfix">
    <div class="bar"><div id="bar" class="checked" style="width:{{ ratingbar }}px;"></div></div>
    </div>

    <div id="items">
    {% for item in products %}
        {% include "include/product.html" %}
    {% empty %}
        You have already rated all sweets. Thanks! Now you can check recommends!
    {% endfor %}
    </div>

<script>
    updateButtons = function() {
$("button").click(function () {
    {% if request.user.is_anonymous %}
        alert('In order to use this service you need to log-in');
    {% else %}
        s = $(this).attr('id').split("-");
        id = s[0];
        val = s[1];
        rated = parseInt($("#rated").html()) + 1;
        all =  $("#all").html();

        $.post("/srs/rate/", { id: id, val: val },function(data) {
            $("#items").append(data);
            updateButtons();
            rated = parseInt($("#rated").html());
            all =  $("#all").html();
            if (rated == all){
                window.location = '/srs/canvas/result/';
            }
        });
        $("#item-" + id).hide("slow");
        $("#rated").html(rated);
        $("#bar").css('width', rated*500/all + "px");

    {% endif %}
});
}
updateButtons();
//    $.ready(function() {
        var rated = parseInt($("#rated").html());
        var all =  parseInt($("#all").html());
        if (rated == all){
            window.location = '/srs/canvas/result/';
        }
//    });
</script>
{% endif %}
    {% endblock %}